<template>
  <div class="demand-publish-detail">
    <div class="section-header">
      <div class="section-title">
        分时备用价格曲线
        <VerticalAlignBottomOutlined style="font-size: 18px; cursor: pointer" />
      </div>

      <div class="view-tabs">
        <a-radio-group v-model:value="viewType" @change="handleViewChange">
          <a-radio-button value="chart">图表</a-radio-button>
          <a-radio-button value="table">表格</a-radio-button>
        </a-radio-group>
      </div>
    </div>

    <!-- 分时价格图表 -->
    <div v-if="viewType === 'chart'" class="price-chart-container">
      <div id="priceChart" style="width: 100%; height: 400px"></div>
    </div>

    <!-- 分时价格表格 -->
    <div v-if="viewType === 'table'" class="price-table-container">
      <a-table
        :dataSource="priceData"
        :columns="priceColumns"
        :pagination="false"
        size="small"
        bordered
        :scroll="{ x: 'max-content' }"
        class="custom-price-table"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex !== 'timeRange'">
            <span
              class="price-cell"
              :class="{
                'time-range-cell': index === 1,
                'price-value-cell': index === 0 || index === 2,
              }"
            >
              {{ record[column.dataIndex] }}
            </span>
          </template>
          <template v-else>
            <span
              class="time-range-label"
              :class="{
                'header-cell': index === 1,
                'price-label': index === 0 || index === 2,
              }"
            >
              {{ record[column.dataIndex] }}
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts"
import { chartOption } from "./chartOption"
import { cloneDeep } from "lodash-es"

const props = defineProps({
  recordData: {
    type: Object,
    default: () => ({}),
  },
})

// 视图类型控制
const viewType = ref("chart")

// 分时价格数据
const priceData = ref([
  {
    key: "1",
    timeRange: "备用价格(元/kW)",
    "00:00-00:15": "100",
    "00:15-00:30": "100",
    "00:30-00:45": "100",
    "00:45-01:00": "100",
    "01:00-01:15": "100",
    "01:15-01:30": "120",
    "01:30-01:45": "120",
    "01:45-02:00": "120",
    "02:00-02:15": "120",
    "02:15-02:30": "120",
    "02:30-02:45": "130",
    "02:45-03:00": "130",
  },
  {
    key: "2",
    timeRange: "时间区间",
    "00:00-00:15": "03:00-03:15",
    "00:15-00:30": "03:15-03:30",
    "00:30-00:45": "03:30-03:45",
    "00:45-01:00": "03:45-04:00",
    "01:00-01:15": "04:00-04:15",
    "01:15-01:30": "04:15-04:30",
    "01:30-01:45": "04:30-04:45",
    "01:45-02:00": "04:45-05:00",
    "02:00-02:15": "05:00-05:15",
    "02:15-02:30": "05:15-05:30",
    "02:30-02:45": "......",
    "02:45-03:00": "23:45-24:00",
  },
  {
    key: "3",
    timeRange: "备用价格(元/kW)",
    "00:00-00:15": "100",
    "00:15-00:30": "100",
    "00:30-00:45": "100",
    "00:45-01:00": "100",
    "01:00-01:15": "100",
    "01:15-01:30": "120",
    "01:30-01:45": "120",
    "01:45-02:00": "120",
    "02:00-02:15": "120",
    "02:15-02:30": "120",
    "02:30-02:45": "......",
    "02:45-03:00": "130",
  },
])

// 表格列配置
const priceColumns = ref([
  {
    title: "时间区间",
    dataIndex: "timeRange",
    key: "timeRange",
    width: 150,
    fixed: "left",
  },
  {
    title: "00:00-00:15",
    dataIndex: "00:00-00:15",
    key: "00:00-00:15",
    width: 100,
  },
  {
    title: "00:15-00:30",
    dataIndex: "00:15-00:30",
    key: "00:15-00:30",
    width: 100,
  },
  {
    title: "00:30-00:45",
    dataIndex: "00:30-00:45",
    key: "00:30-00:45",
    width: 100,
  },
  {
    title: "00:45-01:00",
    dataIndex: "00:45-01:00",
    key: "00:45-01:00",
    width: 100,
  },
  {
    title: "01:00-01:15",
    dataIndex: "01:00-01:15",
    key: "01:00-01:15",
    width: 100,
  },
  {
    title: "01:15-01:30",
    dataIndex: "01:15-01:30",
    key: "01:15-01:30",
    width: 100,
  },
  {
    title: "01:30-01:45",
    dataIndex: "01:30-01:45",
    key: "01:30-01:45",
    width: 100,
  },
  {
    title: "01:45-02:00",
    dataIndex: "01:45-02:00",
    key: "01:45-02:00",
    width: 100,
  },
  {
    title: "02:00-02:15",
    dataIndex: "02:00-02:15",
    key: "02:00-02:15",
    width: 100,
  },
  {
    title: "02:15-02:30",
    dataIndex: "02:15-02:30",
    key: "02:15-02:30",
    width: 100,
  },
  {
    title: "02:30-02:45",
    dataIndex: "02:30-02:45",
    key: "02:30-02:45",
    width: 100,
  },
  {
    title: "02:45-03:00",
    dataIndex: "02:45-03:00",
    key: "02:45-03:00",
    width: 100,
  },
])

let chartInstance = null
const chartOptionData = ref()

// 处理视图切换
const handleViewChange = (e) => {
  viewType.value = e.target.value
  if (viewType.value === "chart") {
    // 切换到图表时，需要重新初始化图表
    nextTick(() => {
      initChart()
    })
  }
}

// 处理数据并初始化图表
const initChart = async () => {
  await nextTick()

  chartOptionData.value = cloneDeep(chartOption)

  // 生成完整的15分钟间隔时间标签
  const timeLabels = []
  const priceDataArray = []

  // 生成从00:00到24:00的15分钟间隔时间段
  for (let hour = 0; hour < 24; hour++) {
    for (let minute = 0; minute < 60; minute += 15) {
      const startHour = hour.toString().padStart(2, "0")
      const startMinute = minute.toString().padStart(2, "0")

      let endHour = hour
      let endMinute = minute + 15

      if (endMinute >= 60) {
        endHour += 1
        endMinute = 0
      }

      // 处理24:00的情况
      const endHourStr =
        endHour === 24 ? "24" : endHour.toString().padStart(2, "0")
      const endMinuteStr = endMinute.toString().padStart(2, "0")

      const timeRange = `${startHour}:${startMinute}-${endHourStr}:${endMinuteStr}`
      timeLabels.push(timeRange)

      // 这里可以根据实际需求设置对应的价格数据
      priceDataArray.push(100)
    }
  }

  // 更新图表配置
  chartOptionData.value.xAxis.data = timeLabels
  chartOptionData.value.series[0].data = priceDataArray

  // 设置x轴标签间隔显示，每隔4个标签显示一个（即每小时显示一个）
  //chartOptionData.value.xAxis.axisLabel.interval = 3

  // 或者使用自定义函数来控制显示哪些标签
  // chartOptionData.value.xAxis.axisLabel.interval = function(index, value) {
  //   // 每隔4个显示一个标签（每小时显示一个）
  //   return index % 4 === 0
  // }

  // 初始化图表
  const chartEl = document.getElementById("priceChart")
  if (chartEl) {
    if (chartInstance) {
      chartInstance.dispose()
    }
    chartInstance = echarts.init(chartEl)
    chartInstance.setOption(chartOptionData.value)

    // 监听窗口大小变化
    window.addEventListener("resize", handleResize)
  }
}

// 处理窗口大小变化
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

// 组件挂载后初始化图表
onMounted(() => {
  if (viewType.value === "chart") {
    initChart()
  }
})

// 组件卸载时销毁图表实例
onBeforeUnmount(() => {
  console.log("销毁图表实例")
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
  window.removeEventListener("resize", handleResize)
})
</script>

<style lang="less" scoped>
.demand-publish-detail {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }

  .price-chart-container {
    background: #141414;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #303030;

    #priceChart {
      width: 100%;
      height: 400px;
    }
  }

  .price-table-container {
    .custom-price-table {
      :deep(.ant-table) {
        //background: #1a1a1a;
        /*  border: 1px solid #404040;
        border-radius: 4px; */

        .ant-table-thead > tr > th {
          //background: #2a2a2a;
          color: #ffffff;
          //border: 1px solid #404040;
          text-align: center;
          font-weight: 500;
          padding: 8px 4px;
          font-size: 12px;
          white-space: nowrap;
        }

        .ant-table-tbody > tr > td {
          //background: #1a1a1a;
          color: #ffffff;
          //border: 1px solid #404040;
          text-align: center;
          padding: 6px 4px;
          font-size: 12px;
          white-space: nowrap;

          &:first-child {
            background: #1d1d1d;
            font-weight: 500;
            color: #ffffff;
          }
        }

        // 第二行（时间区间行）特殊样式
        .ant-table-tbody > tr:nth-child(2) > td {
          //background: #2a2a2a;
          color: #ffffff;
          font-weight: 400;

          &:first-child {
            //background: #2a2a2a;
            font-weight: 500;
          }
        }

        .ant-table-tbody > tr:hover > td {
          background: #333333 !important;

          &:first-child {
            background: #333333 !important;
          }
        }

        // 第二行hover效果
        .ant-table-tbody > tr:nth-child(2):hover > td {
          background: #333333 !important;
        }
      }
    }

    .price-cell {
      color: #ffffff;

      &.time-range-cell {
        color: #ffffff;
        font-weight: 400;
      }

      &.price-value-cell {
        color: #ffffff;
        font-weight: 400;
      }
    }

    .time-range-label {
      color: #ffffff;

      &.header-cell {
        font-weight: 500;
      }

      &.price-label {
        font-weight: 500;
      }
    }
  }
}
</style>
